<!--单纯显示拿到markdown富文本-->
<style>
    pre {
        background: #f6f6f6;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    #custom-toc-container {
        position: fixed;
        z-index: 999;
        right: 30px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 10px 10px 10px #ddd;
        padding: 10px;
    }

</style>
<template>
    <div style="padding: 20px;background: #fcfaf2;">
        <div style="color: #c0c4cc">
            新建时间：{{create_time}}&nbsp;&nbsp;&nbsp;&nbsp;最新跟新时间:{{update_time}}
        </div>
        <div>
            <el-button @click="()=>createA(`/storyEdit?uuid=${uuid}`)">编辑</el-button>
            <el-button  @click="()=>createA(`/story/html2png/${uuid}.png?uuid=${uuid}`)">导出</el-button>
        </div>
        <div id="custom-toc-container"></div>
        <h1 style="font-size: 37px;border-bottom: 1px solid #ddd;padding-bottom: 10px;">{{title}}</h1>
        <div id="test-editormd-view"></div>
    </div>
</template>
<script>
    import {createA, getUrlParamNative, uuid} from "../../utils/utils";

    function openAlertList(text, uuid) {
        function isInFrame() {
            if (self.frameElement && self.frameElement.tagName == "IFRAME") {
                return true;
            }
        }

        if (isInFrame()) {
            parent.openAlertList(text, uuid)
        } else {
            layer.open({
                type: 2,
                title: `【列表】 like ${text}`,
                shadeClose: false,
                shade: false,
                area: ['380px', '480px'],
                content: `/storyOne?uuid=${uuid}` //iframe的url
            });
        }

    }

    window.openAlertList = openAlertList


    import moment from 'moment'
    export default {
        data() {
            return {
                createA,
                create_time:"",
                update_time:"",
                title: "",
                content: "",
                uuid: "",
            }
        },
        mounted() {
            var _uuid = getUrlParamNative('uuid')
            this.uuid = _uuid
            this.ajaxStoryDetail()
        },
        methods: {
            ajaxStoryDetail() {
                axios.get(`/story/one?uuid=${this.uuid}`).then(res => res.data).then(detail => {
                    this.title = detail.title
                    this.content = detail.content
                    this.create_time=moment(detail.create_time).format('YYYY-MM-DD hh:mm:ss')
                    this.update_time=moment(detail.update_time).format('YYYY-MM-DD hh:mm:ss')

                    this.initEdit()
                    if(   this.title){
                        document.title=   this.title
                    }

                })
            },
            initEdit() {
                const editor = editormd.markdownToHTML("test-editormd-view", {
                    markdown: this.content,//+ "\r\n" + $("#append-test").text(),
                    //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                    htmlDecode: "style,script,iframe",  // you can filter tags decode
                    toc: true,
                    tocm: true,    // Using [TOCM]
                    tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                    // gfm             : false,
                    // tocDropdown     : true,
                    // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                    emoji: true,
                    lineWrapping: true, // 编辑框不换行
                    codeFold: true,
                    taskList: true,
                    tex: true,  // 默认不解析
                    flowChart: true,  // 默认不解析
                    sequenceDiagram: true,  // 默认不解析
                    syncScrolling: true,
                    saveHTMLToTextarea: true,       // 保存 HTML 到 Textarea
                    searchReplace: true,
                    previewCodeHighlight: true,     // 预览 HTML 的代码块高亮，默认开启
                });
                this.editor = editor;
                //初始化一些点击事件
                setTimeout(() => {
                    this.initEvent()
                }, 444)

            },
            initEvent() {
                $('a').click(e => {
                    var href = $(e.target).attr('href')
                    //疯狂弹出框
                    var wenhaoIndex=href.indexOf('?')
                    href=href.substring(wenhaoIndex,href.length)
                    var _uuid = getUrlParamNative('uuid', href);
                    if (_uuid) {
                        e.stopPropagation()
                        e.preventDefault()
                        openAlertList($(e.target).text(), _uuid)
                    }
                })
            }
        }
    }
</script>